site_8g/src/app/[locale]/(TabBar)/profile/component/ItemCom/index.tsx

"use client";
import { getWheelApi } from "@/api/cashWheel";
import { useRouter } from "@/i18n/routing";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { Badge, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC } from "react";
import "./style.scss";

/**
 * @description 列表组件
 * @param {string} type 使用类型
 * @param {(params: any) => void} callbackFun 回调方法
 */
export interface ItemComProps {
    type?: string;
}

const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
    const t = useTranslations("ProfilePage");
    const router = useRouter();
    const { unread, userUnread } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
        userUnread: state.userUnred,
    }));
    const links = [
        { label: "gratis", desc: "gratisDesc", icon: "", url: "/", content: null },
        {
            label: "company",
            desc: "",
            icon: "icon-huo",
            color: "rgb(255, 147, 35)",
            url: "/affiliate/summary",
            content: null,
        },
        {
            label: "pray",
            desc: "",
            icon: "icon-mianfei",
            color: "#20894d",
            url: "/cashWheel",
            content: null,
        },
        {
            label: "cashback",
            desc: "",
            icon: "icon-qiandai",
            color: "rgb(255, 147, 35)",
            url: "/cashback",
            content: null,
        },
        { label: "gamblingBets", desc: "", icon: "", url: "/betrecord", content: null },
        { label: "league", desc: "", icon: "", url: "/", content: null },
        { label: "instant", desc: "", icon: "", url: "/", content: null },
        { label: "transactions", desc: "", icon: "", url: "/transactions", content: null },
        {
            label: "message",
            desc: "",
            icon: "",
            url: "/notification",
            content: unread || userUnread ? Badge.dot : null,
        },
        { label: "initial", desc: "", icon: "", url: "/", content: null },
    ];
    const routerHandler = (item: any) => {
        if (item.url === "/cashWheel") {
            getWheelApi().then((res) => {
                if (!Array.isArray(res.data) && !!res.data.activities) {
                    router.push(item.url);
                } else {
                    Toast.show("The event is not open");
                }
            });
        } else {
            router.push(item.url);
        }
    };
    return (
        <div className="itemCom-box">
            {links.map((item, index) => (
                <div
                    className={`${index == 0 ? "free" : ""} box-item`}
                    onClick={() => routerHandler(item)}
                    key={index}
                >
                    <div className={`${item.desc ? "box-item__left" : ""}`}>
                        <Badge content={item.content}>
                            <div className="content">
                                {t(item.label)}
                                <i
                                    className={`iconfont ${item.icon}`}
                                    style={{ color: item.color }}
                                ></i>
                            </div>
                            {item.desc && <p className={"desc"}>{t(item.desc)}</p>}
                        </Badge>
                    </div>

                    <div>
                        <span className="iconfont icon-xiangyou1"></span>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default ItemCom;